<template>
  <view v-if="setting">
    <u-navbar
      backIconColor="#333333"
      title-size="36"
      title="广告投放"
      :is-back="true"
      :border-bottom="false"
      title-color="#333333"
    >
    </u-navbar>
    <u-gap height="20"></u-gap>
    <view class="card">
      <view class="cell">
        <view class="label">
          <text class="requeir">*</text>
          <text class="tl">投放视频</text>
          <text class="des">(上传一个15秒以内视频)</text>
        </view>

        <view style="margin-top: 20rpx">
          <view @click="onUpload" v-if="!form.videoUrl">
            <view class="addBtn">
              <u-icon name="/static/xj.png" size="80"></u-icon>
              <text>添加上传</text>
            </view>
          </view>
          <view v-else>
            <view class="addBtn" style="position: relative">
              <u-icon
                name="close"
                @click="form.videoUrl = ''"
                style="color: red; position: absolute; top: -5rpx; right: -5rpx"
              ></u-icon>
              <text>已上传</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-gap height="20"></u-gap>
    <view class="card">
      <view class="cell dis-flex flex-y-between flex-y-center">
        <view class="label">
          <text class="requeir">*</text>
          <text class="tl">投放时长</text>
        </view>
        <view
          @click="showDateModel = true"
          v-if="!form.push_date"
          class="value dis-flex flex-y-center"
        >
          <text>请选择投放时长</text>
          <u-icon name="/static/enter.png" size="28"></u-icon>
        </view>
        <view v-else @click="showDateModel = true">
          {{ form.push_date_label }}
        </view>
      </view>
    </view>
    <u-gap height="20"></u-gap>
    <view class="card">
      <view class="cell dis-flex flex-y-between flex-y-center">
        <view class="label">
          <text class="requeir">*</text>
          <text class="tl">投放金额</text>
        </view>
        <view class="value1 dis-flex flex-y-center">
          <text>投放可曝光次数</text>
          <text class="num bold"> {{ totalBf }}次</text>
        </view>
      </view>
      <view class="list dis-flex">
        <view
          class="item"
          @click="checkPrice(index)"
          :class="checkIndex == index ? 'check' : ''"
          v-for="(item, index) in setting.presetAmounts"
          :key="index"
        >
          ¥{{ (item * 0.01).toFixed(2) }}
        </view>
        <view class="item" :class="checkIndex == 999 ? 'check' : ''" @click="checkPrice(999)">
          自定义
        </view>
      </view>
    </view>
    <view class="fixed-wapper">
      <view class="floor-tip">
        <view @click="checked = !checked">
          <u-icon
            :name="checked ? '/static/selected.png' : '/static/unselect.png'"
            size="35"
            style="margin-right: 10rpx; margin-top: 12rpx"
          ></u-icon>
        </view>
        <text>我已阅读并同意</text>
        <text
          style="color: #fa453c"
          @click="routeTo('/universal/webcontent/webcontent?key=advertising_agreement')"
          >《商家投放广告协议》
        </text>
      </view>
      <view @click="submit" class="submit-btn btn"> 确认提交广告投放</view>
    </view>
    <u-mask :show="showPriceModel" @click="showPriceModel = false" z-index="1007"></u-mask>
    <view class="center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="showPriceModel">
      <view class="tl">自定义金额</view>
      <input class="input" v-model="cusPrice" placeholder="¥请输入金额" type="number" min="30" />
      <view class="des" v-if="setting.presetAmounts && setting.presetAmounts.length > 0"
        >金额不低于¥{{ setting.presetAmounts[0] }}元
      </view>
      <view class="bt" @click="cusCheck">确定</view>
      <u-icon class="uion" name="close" color="#FFFFFF" @click="showPriceModel = false"></u-icon>
    </view>
    <u-popup
      v-model="showDateModel"
      width="750rpx"
      height="520rpx"
      border-radius="30"
      mode="bottom"
    >
      <view class="date-box">
        <view class="top dis-flex flex-y-between">
          <view class="cancel">取消</view>
          <view class="tl">投放时长</view>
          <view class="check" @click="checkDate()">确认</view>
        </view>
        <view
          class="item"
          :class="i == checkDateIndex ? 'checked' : ''"
          v-for="(date, i) in dateList"
          :key="i"
          @click="checkDateIndex = i"
        >
          {{ date.label }}
        </view>
      </view>
    </u-popup>

    <PayPopup ref="payPopupRef">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ (form.price * 0.01).toFixed(2) }}
      </p>
    </PayPopup>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '@/common/config'
import { uploadFiles } from '../../common/upload.js'
import PayPopup from '@/components/PayPopup.vue'

export default {
  components: {
    PayPopup
  },
  data() {
    return {
      action: BASE_URL + UP_URL,
      fileList: [],
      checked: true,
      checkIndex: 0,
      checkDateIndex: 0,
      showPriceModel: false,
      showDateModel: false,
      dateList: [
        {
          label: '1小时',
          value: 1
        },
        {
          label: '2小时',
          value: 2
        },
        {
          label: '6小时',
          value: 6
        },
        {
          label: '12小时',
          value: 12
        }
      ],
      priceList: [
        {
          label: '¥30',
          value: 30
        },
        {
          label: '¥50',
          value: 50
        },
        {
          label: '¥100',
          value: 100
        },
        {
          label: '¥500',
          value: 500
        },
        {
          label: '¥1000',
          value: 1000
        },
        {
          label: '自定义',
          value: 0
        }
      ],
      form: {
        push_date: '',
        price: '',
        videoUrl: '',
        imageUrl: ''
      },
      cusPrice: '',
      setting: null,
      totalBf: 0,
      payOrderId: '',
      resStatus: 1
    }
  },
  created() {
    this.$u.get('/app-api/ad/plan/config').then((res) => {
      this.setting = res.data
      this.form.price = this.setting.presetAmounts[0]
      this.updateBf()
    })
  },
  methods: {
    updateBf() {
      this.totalBf = this.form.price / this.setting.exposureUnitPrice
    },
    submit() {
      if (this.$u.test.isEmpty(this.form.videoUrl)) {
        this.$u.toast('请上传投放视频')
        return
      }
      if (this.$u.test.isEmpty(this.form.push_date)) {
        this.$u.toast('请选择投放时长')
        return
      }
      if (this.$u.test.isEmpty(this.form.price)) {
        this.$u.toast('请选择投放金额')
        return
      }

      this.$u
        .post('/app-api/ad/plan/submit', {
          videoUrl: this.form.videoUrl,
          imageUrl: this.form.imageUrl,
          budgetPrice: this.form.price,
          exceptDuration: this.form.push_date * 3600
        })
        .then((res) => {
          if (res.code === 0) {
            this.payOrderId = res.data.tradeNo
            this.$refs.payPopupRef.open(this.payOrderId, '', res.data.price === 0)
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    onUpload() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['video'],
        success: (res) => {
          console.log('res', res)
          if (res.tempFiles) {
            let tempVideoPath = res.tempFiles[0].tempFilePath,
              tempImagePath = res.tempFiles[0].thumbTempFilePath
            uploadFiles(tempVideoPath).then((path) => {
              this.form.videoUrl = path.data
            })
            uploadFiles(tempImagePath).then((path) => {
              this.form.imageUrl = path.data
            })
          }
        }
      })
    },
    checkPrice(index) {
      this.checkIndex = index
      if (index != 999) {
        this.form.price = this.setting.presetAmounts[index]
        this.updateBf()
      } else this.showPriceModel = true
    },
    cusCheck() {
      this.showPriceModel = false
      this.form.price = this.cusPrice * 100
      this.updateBf()
    },
    checkDate() {
      this.showDateModel = false
      this.form.push_date = this.dateList[this.checkDateIndex].value
      this.form.push_date_label = this.dateList[this.checkDateIndex].label
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

.center-box {
  width: 610rpx;
  height: 500rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: absolute;
  z-index: 9999;
  top: 30vh;
  left: 70rpx;
  padding: 60rpx 20rpx 30rpx 20rpx;

  .tl {
    font-size: 36rpx;
    text-align: center;
  }

  .input {
    height: 90rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    margin-top: 60rpx;
    font-size: 30rpx;
    padding: 0 20rpx;
  }

  .des {
    font-size: 26rpx;
    color: #999999;
    margin-top: 20rpx;
  }

  .bt {
    width: 100%;
    height: 80rpx;
    background: #10a28f;
    border-radius: 40rpx;
    margin-top: 80rpx;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }

  .uion {
    margin: auto;
    margin-top: 115rpx;
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.date-box {
  padding: 0 30rpx;

  .top {
    font-size: 32rpx;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #e9edf0;

    .cancel {
      color: #949599;
    }

    .check {
      color: #10a28f;
    }
  }

  .item {
    height: 100rpx;
    border-bottom: 1rpx solid #e9edf0;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    color: #949599;
  }

  .item:last-child {
    border: none;
  }

  .checked {
    color: #10a28f;
    font-size: 34rpx;
  }
}

.card {
  background: #ffffff;
  padding: 30rpx 20rpx;
}

.addBtn {
  width: 200rpx;
  height: 200rpx;
  background: #f5f5f5;
  border-radius: 10rpx 20rpx 20rpx 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #999999;
  flex-flow: column;
}

.cell {
  .label {
    font-size: 30rpx;
    color: #333333;

    .requeir {
      color: #ff4754;
    }

    .des {
      color: #999999;
      font-size: 26rpx;
    }
  }

  .u-upload {
    margin-top: 27rpx;
  }

  .value {
    font-size: 30rpx;
    color: #999999;
  }

  .value1 {
    font-size: 26rpx;
    color: #333333;
  }

  .num {
    color: #10a28f;
    font-size: 32rpx;
  }
}

.list {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30rpx;

  .item {
    width: 220rpx;
    height: 80rpx;
    background: #f5f5f5;
    border-radius: 5rpx;
    margin-bottom: 20rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 36rpx;
    color: #333333;
  }

  .check {
    font-weight: 600;
    background: #d7f5f1;
    color: #10a28f;
  }
}

.bold {
  font-weight: bold;
}

.fixed-wapper {
  background: #ffffff;
  width: 100%;
  left: 0;
  padding: 0 20rpx;
}

.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
  color: #333333;
}
</style>
